<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            width: 100%;
            height: 63px;
            background-color: #333;
        }

        .tubiao {
            width: 180px;
            height: 63px;
            margin-left: 18%;
        }

        .sousuo {
            float: right;
            margin-top: -45px;
            margin-right: 150px;
            width: 285px;
            position: relative;
            height: 30px;
            display: flex;
            align-items: center;
            background-color: #525362;
        }

        .sousuokuang {
            width: 16px;
            height: 16px;
            margin-left: 250px;
            background: url(img/11.png);
            background-size: 100%;
        }

        .daohang {
            background: #222;
            height: 50px;
            width: 100%;
        }

        .daohanglan {
            position: relative;
            width: 960px;
            margin: 0 auto;
        }

        .daohanglan1 {
            height: 100%;
            position: absolute;
            left: 0;
            list-style: none;
            margin-top: 0px;
            margin-left: -17.5%;
        }

        .daohanglan3 {
            background-color: #2a2a2a;
            float: left;
            display: block;
            font-family: "微软雅黑";
            font-size: 16px;
            width: 75px;
            height: 50px;
            text-align: center;
            border-left: 1px solid #353535;
            border-right: 1px solid #0d0c08;
        }

        .daohanglan3:hover {
            background-color: red;
        }

        .daohanglan2 a {
            color: white;
            width: 75px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
        }

        .denglu {
            width: 250px;
            position: relative;
            height: 50px;
            background-color: #2a2a2a;
            margin-left: 65%;
        }

        .denglu1 {
            height: 100%;
            position: absolute;
            left: 0;
            list-style: none;
            font-family: "微软雅黑";
            font-size: 16px;
            margin-left: -14%;
        }

        .app a {
            width: 50px;
            height: 50px;
            float: left;
            text-decoration: none;
            color: gainsboro;
        }

        .tougao a {
            width: 50px;
            height: 50px;
            float: left;
            color: white;
            text-decoration: none;
        }

        .kuaisu a {
            width: 100px;
            height: 50px;
            float: left;
            color: gainsboro;
            text-decoration: none;
            margin-top: -49px;
            font-size: 13px;
            margin-left: 180%;
        }

        .zhuce a {
            width: 100px;
            height: 50px;
            float: left;
            color: gainsboro;
            text-decoration: none;
            font-size: 13px;
            margin-top: -47px;
            margin-left: 100%;
        }

        .section {
            width: 100%;
            height: 800Px;
            background-color: #dbdde0;
            position: relative;
        }

        .xinwenzixun {
            width: 990px;
            height: 20px;
            position: absolute;
            left: 18%;
            margin-top: 30px;

        }

        .xinwen {
            width: 65px;
            height: 20px;
            background-color: red;
            line-height: 20px;
        }

        .xinwen .zi {
            font-size: 14px;
            color: white;
            text-decoration: none;
        }

        .zixun {
            width: 700px;
            height: 20px;
            margin-top: -20px;
            /* margin-left: 80px; */
        }

        .zixun .zi1 {
            font-size: 13px;
            color: rgb(99, 146, 178);
            text-decoration: none;
            margin-top: -50px;
            margin-left: 80px;
        }

        .zhongjian {
            width: 960px;
            height: 520px;
            position: absolute;
            background-color: white;
            margin-top: 70px;
            margin-left: 18%;
            border: 1px solid black;
        }

        .left {
            width: 180px;
            height: 485.6px;
            width: 180px;
            overflow: hidden;
            float: left;
            position: relative;
            z-index: 100;
            color: #444
        }

        .jiaodian {
            color: #FFF;
            font-family: "微软雅黑";
            font-size: 18px;
            text-align: right;
            background-color: #5c5d5e;
            padding: 7px 20px;
            font-weight: lighter;
            line-height: 20px;
            height: 40px;
            width: 139px;
        }

        .jiaodian2 {
            color: #FFF;
            font-family: "微软雅黑";
            font-size: 18px;
            text-align: right;
            background-color: #5c5d5e;
            padding: 7px 20px;
            line-height: 20px;
        }

        .xia {
            font-family: "宋体";
            text-align: right;
            float: right;
            font-weight: lighter;
            padding: 0 0 15px 20px;
            height: 415px;
            color: #7e7e7e
        }

        .box1 {
            font-size: 12px;
            cursor: pointer;
            padding: 15px 20px 10px 0;
            border-bottom: 1px solid #dee0e3;
            border-right: 1px solid #d23133;
            position: relative;
            height: 58px;
            width: 250px;
            color: #d23133;
            border-right-width: 0;
            font-family: "微软雅黑";
            font-size: 13px;
        }

        li {
            list-style: none;
        }

        .box {
            cursor: pointer;
            padding: 15px 20px 10px 0;
            border-bottom: 1px solid #dee0e3;
            border-right: 1px solid #dee0e3;
            position: relative;
            height: 58px;
            width: 250px;
            font-weight: lighter;
            font-family: "微软雅黑";
            font-size: 13px;
        }

        .xiao {
            font-size: 12px;
        }

        .box :hover {
            color: #d23133;
        }

        .datu {
            width: 740px;
            height: 476px;
            background: url(img/5.png);
            background-size: 100%;
            margin-left: 200px;
            margin-top: 25px;
        }

        .right {
            float: left;
            width: 300px;
            height: 450px;
            position: absolute;
            background-color: #333;
            padding-bottom: 15px;
            margin-top: -480px;
            margin-left: 100%;
        }

        .paishedian {
            width: 210px;
            height: 40px;
            position: absolute;
            background: url(img/12.png);
            background-size: 100%;
            margin-left: 100%;
            margin-top: -526px;
        }

        .zazhi {
            overflow: hidden;
            position: relative;
        }

        .zazhi h2 {
            height: 32px;
            background: #222;
            border-top: 1px solid #464646;
            /* padding-top: 8px; */
            padding: 8px;
            color: #fff;
            padding-left: 10px;
            font-size: 16px;
            font-family: "微软雅黑";
            width: 290px;
            margin-top: -6px;
        }

        .zazhi2 {
            background: #333;
            border-width: 1px 0;
            border-style: solid;
            border-color: #464646;
            padding: 20px 10px;
            width: 280px;
            height: 103px;
            margin-top: -12px;
        }

        .zazhi3 {
            float: left;
            margin-right: 8px;
            width: 64px;
            height: 91px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            margin-left: 18px;
            list-style: none;
        }

        .weixin h2 {
            font-size: 18px;
            padding: 16px 0;
            text-align: center;
            box-sizing: border-box;
            height: auto;
            background: #222;
            border-top: 1px solid #464646;
            color: #fff;
            font-family: "微软雅黑";
        }

        .erweima {
            overflow: hidden;
            padding: 25px 35px 14px;
        }

        .erweima1 {
            width: 95px;
            float: left;
            text-align: center;
            color: #fff;
        }

        .erweima1 img {
            width: 100%;
            height: 95px;
            display: block;
            border-radius: 6px;
        }

        .erweima1 p {
            padding: 0;
            margin: 0;
            font-weight: lighter;
            font-size: 12px;
            margin-top: 10px;
        }

        .erweima2 {
            width: 95px;
            float: left;
            text-align: center;
            color: #fff;
        }

        .erweima2 img {
            width: 100%;
            height: 95px;
            display: block;
            border-radius: 6px;
            margin-left: 30px;
        }

        .erweima2 p {
            padding: 0;
            margin: 0;
            font-weight: lighter;
            font-size: 12px;
            margin-top: 10px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="tubiao">
            <img src="img/logo.png" alt="">
        </div>
        <div class="sousuo">
            <div class="sousuokuang"></div>
        </div>
    </div>
    <div class="daohang">
        <div class="daohanglan">
            <ul class="daohanglan1">
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">首页</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">景观</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">谈资</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">作者</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">大讲堂</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">活动</a></li>
                </div>
                <div class="daohanglan3">
                    <li class="daohanglan2"><a href="">商城</a></li>
                </div>

            </ul>
        </div>
        <div class="denglu">
            <ul class="denglu1">
                <li class="app"><a href="">APP</a></li>
                <li class="tougao"><a href="">投稿</a></li>
                <li class="zhuce"><a href="">登录/注册</a></li>
                <li class="kuaisu"><a href="">快速登录</a></li>
            </ul>
        </div>
    </div>
    <div class="section">
        <div class="xinwenzixun">
            <div class="xinwen">
                <b><a href="" class="zi">新闻资讯:</a></b>
            </div>
            <div class="zixun">
                <a href="" class="zi1">陪中国少年，看中国河山 ——中国国家地理X中信银行“少年看中国”主题活动2024乘风开启</a>
            </div>
        </div>
        <div class="zhongjian">
            <div class="left" style="margin-top: 25px;">
                <div class="jiaodian">
                    <b><span class="jiaodian2">焦点</span></b>
                    <span class="jaiodian1">FOCUS</span>
                    <div class="xia">
                        <li class="box1" style="border-right: #d23133 solid 1px; margin-top: 7px;">
                            <h3 class="title">安徽专辑（下）</h3>
                            <span class="xiao">凤凰涅槃新安徽</span>
                        </li>
                        <li class="box">
                            <h3 class="title">安徽专辑（上）</h3>
                            <span class="xiao">默默为中国生产模式的省</span>
                        </li>
                        <li class="box">
                            <h3 class="title">冬季赛里木湖</h3>
                            <span class="xiao">湖冰形态太神奇</span>
                        </li>
                        <li class="box">
                            <h3 class="title">海马冷泉</h3>
                            <span class="xiao">千米深海中的“绿洲”</span>
                        </li>
                        <li class="box">
                            <h3 class="title">河西走廊</h3>
                            <span class="xiao">相机找回的古城传奇</span>
                        </li>
                    </div>
                </div>
            </div>
            <div class="datu"></div>
            <div class="paishedian"></div>
            <div class="right">
                <div class="zazhi">
                    <h2>杂志</h2>
                    <ul class="zazhi2">
                        <a href="">
                            <li class="zazhi3"><img src="img/3.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="zazhi3"><img src="img/14.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="zazhi3"><img src="img/15.jpg" alt=""></li>
                        </a>
                    </ul>
                </div>
                <div class="weixin">
                    <h2>中国国家地理微信公众平台</h2>
                </div>
                <div class="erweima">
                    <div class="erweima1">
                        <img src="img/16.png" alt="">
                        <p>订阅号</p>
                    </div>
                    <div class="erweima2">
                        <img src="img/17.png" alt="">
                        <p>服务号</p>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>

</html>